<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="keywords" content="canvas实例,loading动画,进度条动画,加载动画"/>
    <meta name="description" content=""/>
    <style>
        /*框架预览 CSS*/
        * {
            margin: 0;
            padding: 0;
        }

        body {
            text-align: center;
            background-color: #000;
        }

        .mkeBody {
            background: #121212;
        }

        .mkeHeadBox {
            padding: 30px 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0;
            color: #fff;
            text-align: center;
            overflow: hidden;
            border-bottom: 3px solid #666;
            box-shadow: inset 0 -2px 3px #000000;
            letter-spacing: 1px;
            font: 26px/26px "微软雅黑";
        }

        .mkeFooterBox {
            padding: 25px 10px;
            text-overflow: ellipsis;
            margin: 0;
            color: #fff;
            font-size: 14px;
            line-height: 24px;
            text-align: center;
            overflow: hidden;
            border-top: 3px solid #666;
            box-shadow: inset 0 2px 3px #000000;
        }

        .mkeContentBox {
            background: #000;
        }

        .mkeContentBox:after {
            height: 0;
            clear: both;
        }

        .mkeFooterBox p, .mkeFooterBox div {
            padding: 0;
            margin: 0;
            line-height: 26px;
            font-size: 14px;
        }

        .mkeFooterBox a {
            color: #fff;
            white-space: nowrap
        }

        .mkeButton {
            background: #F36;
            display: inline-block;
            text-decoration: none;
            width: 102px;
            border-radius: 0.3em;
            transition: all 0.3s ease
        }

        .mkeButton:hover {
            background: #FF1550;
        }

        .mkeURL {
            font-size: 24px;
        }

        .mkeFooterBox .mKeBannerAD {
            width: 728px;
            height: 90px;
            margin: 18px auto 0;
        }

        .mkeFooterBox .mSmallKeBannerAD {
            display: none;
        }

        @media only screen and (max-width: 900px) {
            .mkeButton {
                display: block;
                margin: 8px auto 0;
            }
        }

        @media only screen and (max-width: 767px) {
            .mkeHeadBox {
                font-size: 18px;
                padding: 15px 10px;
            }

            .mkeFooterBox p, .mkeFooterBox div {
                line-height: 24px;
                font-size: 12px;
            }

            .mkeURL {
                font-size: 22px;
            }

            .mkeFooterBox .mKeBannerAD {
                display: none;
            }

            .mkeFooterBox .mSmallKeBannerAD {
                width: 300px;
                height: 250px;
                margin: 18px auto 0;
                display: block;
            }
        }

        /*End*/
    </style>
</head>
<body class="mkeBody">
<div class="mkeHeadBox">Canvas制作圆形进度条Loading效果</div>
<div class="mkeContentBox">
    <!--效果html开始-->
    <canvas id="canvas" width="300" height="500" style="background:#000;"></canvas>
    <script>
        window.onload = function () {
            var canvas = document.getElementById('canvas'),  //获取canvas元素
                    context = canvas.getContext('2d'),  //获取画图环境，指明为2d
                    centerX = canvas.width / 2,   //Canvas中心点x轴坐标
                    centerY = canvas.height / 2,  //Canvas中心点y轴坐标
                    rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
                    speed = 0.1; //加载的快慢就靠它了
            //绘制蓝色外圈
            function blueCircle(n) {
                context.save();
                context.strokeStyle = "#fff"; //设置描边样式
                context.lineWidth = 5; //设置线宽
                context.beginPath(); //路径开始
                context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }

            //绘制白色外圈
            function whiteCircle() {
                context.save();
                context.beginPath();
                context.strokeStyle = "white";
                context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }

            //百分比文字绘制
            function text(n) {
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.strokeStyle = "#fff"; //设置描边样式
                context.font = "40px Arial"; //设置字体大小和字体
                //绘制字体，并且指定位置
                context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10);
                context.stroke(); //执行绘制
                context.restore();
            }

            //动画循环
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                blueCircle(speed);
                if (speed > 100) speed = 0;
                speed += 0.1;
            }());
        }
    </script>
    <!--效果html结束-->
</div>
</body>
</html>